<template>
  <div>
    <script :id="id"  :defaultMsg="writeMsg" type="text/plain" ></script>

  </div>
</template>

<script>
import '../../../public/ueditor/third-party/jquery-1.10.2.min.js'
import '../../../public/ueditor/ueditor.config.js'
import '../../../public/ueditor/ueditor.all.js'
import '../../../public/ueditor/lang/zh-cn/zh-cn.js'

//引入公式插件
import '../../../public/ueditor/kityformula-plugin/addKityFormulaDialog.js'
import '../../../public/ueditor/kityformula-plugin/getKfContent.js'
import '../../../public/ueditor/kityformula-plugin/defaultFilterFix.js'

// import bus  from  '../test/base/Event.js'
export default {
    name: "UEditor",
    props: {
        id: {
            type: String
        },
        config: {
            type: Object
        },
        writeMsg:{
        	type: String
        },
        observerDebounceTime: {
          type: Number,
          default: 50,
          validator: function (value) {
            return value >= 20;
          }
        },
        observerOptions: {
          type: Object,
          default: function () {
            return {
              attributes: true, // 是否监听 DOM 元素的属性变化
              attributeFilter: ['src', 'style', 'type', 'name'], // 只有在该数组中的属性值的变化才会监听
              characterData: true, // 是否监听文本节点
              childList: true, // 是否监听子节点
              subtree: true // 是否监听后代元素
            };
          }
        },
        
    },
    data() {
        return {
            editor: null,
            isinit:false,
        }
    },    
    mounted() {

        this.$nextTick(()=>{
            //初始化UE
            const _this = this;

            this.editor = UE.delEditor(this.id);
            this.editor = UE.getEditor(this.id,this.config);
            
            this.editor.addListener('ready', ()=>{

                setTimeout(()=>{
                    if(this.writeMsg!=''){
                        this.editor.setContent(this.writeMsg);
                    }else{
                      // console.log(888)
                    }
                },300);
                this.$emit('ready', this.editor);
                this.editor.addListener("contentChange", ()=>{
                    // setTimeout(()=>{
                       this.$emit('input', this.editor.getContent());
                        console.log("msg: "+this.writeMsg, "cont: "+this.editor.getContent())
                    // },300);

                });

                this.isinit=true;
            });
        })
 
    },
    destoryed() {
        this.editor.destory();
    },
    methods:{
        clearContentTxt(){
          this.editor.setContent('');
        },
        setDisabled(){
            this.editor.setDisabled('fullscreen')
        },
        getUEContent(){
            return this.editor.getContent();
        },
        getContentTxt(){
            return this.editor.getContentTxt();
        },
        setUEContent(val){

         	if(this.isinit){
             return this.editor.setContent(val);
         	}else{
         		 const _this = this;
         		setTimeout(function(){//过段时间在加载
            		  _this.setUEContent(val);
            	},500)
         	}
        },
        hasContent(){
            return this.editor.hasContents();
        },
    }
}
</script>

<style lang="scss">
    .edui-default .edui-editor-toolbarbox{
        box-shadow:none !important;
    }
    .edui-default .edui-editor-toolbarboxouter{
        background-image: initial !important;
        background-color: #fff !important;
        box-shadow:none !important;
    }
</style>